<template>
	<!-- tab切换 -->
	<view class="nav-position">
		<view class="container">
			<scroll-view class="tabs" scroll-x enable-passive scroll-with-animation>
			  <view v-for="(item, index) in tabNav" :key="index"
			  class="tab" :data-index="index" @click="onClickTab(index)">
				<view class="tab-text" :class="{ active: activeIndex === index }">{{ item.name }}</view>
				<view class="tab-underline" :class="{ activeBor: activeIndex === index }"></view>
			  </view>
			</scroll-view>
		</view>
	</view>
	<view class="top-height"></view>
	<!-- 发布者 -->
	<view class="companion-view" v-for="(item,index) in activityData" :key="index" @click="juMp(item._id)">
		<view class="companion-name global-display global-a-items">
			<image :src="item.author_data[0].avatarUrl" mode="aspectFill"></image>
			<view>
				<text>{{item.author_data[0].nickname}}</text>
				<text>{{item.timestamp}}</text>
			</view>
		</view>
		<view class="companion-title text-show">{{item.description}}</view>
		<view class="companion-time global-display global-a-items">
			<image src="/static/icon/concern/time.png" mode="widthFix"></image>
			<text>时间：&nbsp;{{item.companion_time}}</text>
		</view>
		<view class="companion-time global-display global-a-items">
			<image src="/static/icon/concern/address.png" mode="widthFix"></image>
			<text>地点：&nbsp;{{item.city}} {{item.full_address}}</text>
		</view>
		<view class="companion-image">
			<image v-for="(item_a,index_a) in item.image" :key="index_a"
			:src="item_a" @click.stop="showImage(item.image,item_a)" 
			class="fadeIn" mode="aspectFill">
			</image>
		</view>
		<view class="companion-people">{{item.count}}人已报名</view>
	</view>
	<!-- 如果没有数据 -->
	<view class="kong-view" v-if="exist">
		<image src="/static/icon/index/kong-zhuang-tai.png" mode="widthFix"></image>
		<text class="no-data">没有更多了</text>
	</view>
	<view style="height: 200rpx;"></view>
	<view class="sign-up other-up" @click="initPartner">发布活动</view>
</template>

<script setup lang="ts">
	import {ref,onMounted} from 'vue'
	import {onReachBottom,onShow,onLoad} from '@dcloudio/uni-app'
	import { myActivitiesAPI } from '@/api/companion'
	import type { getMyActivitiesItemResponse } from '@/types/companion'
	const tabNav = ref([
		{
			api:'/par-in-activities',
			name:'我参与的'
		},
		{
			api:'/my-in-activities',
			name:'我发起的'
		},
	])
	// 存储请求的数据
	const activityData = ref<getMyActivitiesItemResponse[]>([])
	// 是否有数据
	const exist = ref(false)
	// 获取数据
	onLoad(async()=>{
		await requestData(tabNav.value[0].api)
	})
	async function requestData(api:string){
		page.value = 1//再次查询时要把页数置为1
		const res = await myActivitiesAPI(api,{page:1})
		console.log(res);
		activityData.value = res.data
		exist.value = res.data.length > 0 ? false : true
	}
	// 预览图片
	function showImage(image:string[],item_a:string){
		wx.previewImage({
		  current: item_a, // 当前显示图片的http链接
		  urls: image // 需要预览的图片http链接列表
		})
	}
	// 跳转详情
	function juMp(_id:string){
		wx.navigateTo({url:'/pages/companion/partner-details?_id=' + _id})
	};
	// 点击我参与的或者我发起的
	const tabIndex = ref(0)
	const activeIndex = ref(0)
	async function onClickTab(index:number){
		tabIndex.value = index
		activeIndex.value = index
		await requestData(tabNav.value[index].api)
	}
	// 上啦加载
	const page = ref(1)
	onReachBottom(async()=>{
		page.value++
		const companionRes = await myActivitiesAPI(tabNav.value[tabIndex.value].api,{page:page.value})
		activityData.value = [...activityData.value,...companionRes.data]
	})
	// 跳转发布活动
	function initPartner(){
		wx.navigateTo({url:'/pages/companion/Init-partner'})
	}
</script>

<style>
	/* 顶部吸顶标签栏 */
	.nav-position{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #ffffff;
		box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.04);
	}
	.nav-position .container{
		padding: 0 24rpx;
	}
	.tabs{
		height: 100rpx;
		display: flex;
		align-items: flex-end;
		white-space: nowrap;
	}
	.tab{
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: 100rpx;
		padding: 0 24rpx;
	}
	.tab-text{
		font-size: 30rpx;
		color: #777777;
		transition: all .2s ease;
	}
	.tab-text.active{
		color: #111111;
		font-weight: 600;
	}
	.tab-underline{
		width: 0;
		height: 6rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg,#4dabff,#2f80ff);
		transition: width .25s ease;
		margin-top: 16rpx;
	}
	.tab-underline.activeBor{
		width: 48rpx;
	}

	/* 页面内容上内边距与占位 */
	.top-height{
		height: 100rpx;
	}

	/* 活动卡片 */
	.companion-view{
		background-color: #ffffff;
		margin: 24rpx;
		padding: 24rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 28rpx rgba(0,0,0,0.06);
	}
	.companion-name{
		margin-bottom: 16rpx;
	}
	.companion-name image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.companion-name view{
		display: flex;
		flex-direction: column;
	}
	.companion-name text:first-child{
		font-size: 30rpx;
		color: #111111;
		font-weight: 600;
		line-height: 1.2;
	}
	.companion-name text:last-child{
		font-size: 24rpx;
		color: #9aa0a6;
		margin-top: 8rpx;
	}

	.companion-title{
		font-size: 30rpx;
		color: #333333;
		line-height: 1.6;
		margin: 8rpx 0 16rpx;
	}

	.companion-time{
		margin: 8rpx 0;
		color: #5f6368;
		font-size: 26rpx;
	}
	.companion-time image{
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	/* 九宫格图片 */
	.companion-image{
		display: flex;
		flex-wrap: wrap;
		margin: 12rpx -8rpx 0;
	}
	.companion-image image{
		width: calc(33.333% - 16rpx);
		height: 200rpx;
		border-radius: 12rpx;
		margin: 8rpx;
		object-fit: cover;
	}

	/* 动画 */
	.fadeIn{
		animation: fadeIn .3s ease-in both;
	}
	@keyframes fadeIn{
		from{opacity: 0; transform: scale(.98);} to{opacity: 1; transform: scale(1);}
	}

	/* 报名人数 */
	.companion-people{
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #2f80ff;
		background: rgba(47,128,255,0.08);
		display: inline-flex;
		padding: 8rpx 12rpx;
		border-radius: 999rpx;
	}

	/* 空状态 */
	.kong-view{
		padding: 80rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #9aa0a6;
	}
	.kong-view image{
		width: 300rpx;
		margin-bottom: 16rpx;
	}
	.no-data{
		font-size: 26rpx;
	}

	/* 固定发布按钮 */
	.sign-up.other-up{
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 40rpx;
		width: 680rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 999rpx;
		background: linear-gradient(90deg,#4dabff,#2f80ff);
		color: #ffffff;
		font-size: 30rpx;
		box-shadow: 0 8rpx 20rpx rgba(47,128,255,0.3);
		z-index: 998;
	}

	/* 现有保留样式 */
	.co-title-tab{
		font-weight: bold;
		font-size: 32rpx;
	}
	.co-tab-view .van-tabs__line{
		width: 60rpx; height: 10rpx;
	}
</style>